'use client';

import { useState, useEffect } from 'react';
import { useSocket } from './socket-io-provider';

interface CollaborationStatusProps {
  projectId: string;
}

export default function CollaborationStatus({ projectId }: CollaborationStatusProps) {
  const { socket, isConnected } = useSocket();
  const [activeUsers, setActiveUsers] = useState<number>(1);
  const [lastActivity, setLastActivity] = useState<Date | null>(null);

  // 当连接状态改变时更新UI
  useEffect(() => {
    if (isConnected) {
      // 模拟收到活跃用户信息
      const timer = setTimeout(() => {
        setActiveUsers(Math.floor(Math.random() * 2) + 1); // 1-2个用户
        setLastActivity(new Date());
      }, 1000);
      
      return () => clearTimeout(timer);
    } else {
      setActiveUsers(1); // 只有当前用户
    }
  }, [isConnected]);

  // 监听内容更新事件
  useEffect(() => {
    if (!socket) return;
    
    const handleActivity = () => {
      setLastActivity(new Date());
    };
    
    socket.on('content-update', handleActivity);
    
    return () => {
      socket.off('content-update', handleActivity);
    };
  }, [socket]);

  return (
    <div className="flex items-center text-xs space-x-2">
      <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}></div>
      <span>{isConnected ? '已连接' : '离线模式'}</span>
      {activeUsers > 1 && (
        <span className="text-green-600 font-medium">
          {activeUsers} 人正在协作
        </span>
      )}
      {lastActivity && (
        <span className="text-gray-500">
          最后活动: {lastActivity.toLocaleTimeString()}
        </span>
      )}
    </div>
  );
} 